<template>
  <div class="home" >
    home
    <router-link to="/detail?id=1001">跳到detail</router-link>
    <router-link :to="{ name: 'Detail', query: { id: 123 }}">跳转至detail</router-link>
    <button @click="handleClick">跳转至detail</button>
    <button @click="handleMovie">跳转至movie</button>

    <div :class="['one',isShow?'two':'']">test</div>
    <!-- 如何频繁的要显示或隐藏 -->
    <div v-show="isShow">show</div>

    <div @click="handletab(index,item.path)" :class="[active==index?'current':'']" v-for="(item,index) of tabs" :key="index">{{item}}</div>

    <div v-show="active==0">nowPlaying</div>
    <div v-show="active==1">comingSoon</div>
  </div>
</template>

<script>

// import test from './a'
import {a,b} from './a'

export default {
  data() {
    return {
      isShow:true,  //.two的样式黑色 show显示
      // tabs:["正在热映","即将上映"],
      tabs:[{name:"正在热映",path:"/films/nowPlaying"},{name:"即将上映",path:"/films/comingSoon"}],
      active:0
    }
  },
  name: 'Home',
  methods:{
    handleClick(){
      // this.$router.push("/detail?id=1001")
      this.$router.push({name:'Detail',query:{id:123}})
    },
    handleMovie(){
      this.$router.push("/movie?id=1001")  //404   path: '/movie/:id', 
      // this.$router.push("/detail?id=1001") //   path: '/detail', 
      // this.$router.push({name:'Movie',params:{id:123}})
      // this.$router.push("/movie/12143")
    },
    handletab(index,path){
      this.active = index;
      console.log(path)
    },
  },
  mounted() {
    // console.log(test.a)
    console.log(a)
    console.log(b)
  },
}
</script>
<style scoped>

.one{
  color: red;
}
.two{
  color: #333;
}
.current{
  color: red;
}
</style>
